<template>
  <div class="nav-container">
    <div class="nav-center yh-layout-box">
      <div class="nav_ul_con">
        <!-- :to="{name:'factory-factoryId',params: { factoryId: factoryId }}" -->
        <a :class="index == 'index'?'nav_list nav_list_active':'nav_list'" :href="'/mallplus/factory/'+factoryId" >
          首页
        </a>
        <div :class="index == 'list' && !classifyId?'nav_list nav_list_active':'nav_list'" @click="routeToPath('/product/list/'+factoryId,'mallplus', 'new')">
          全部商品
        </div>
        <div :class="index == 'offline'?'nav_list nav_list_active':'nav_list'" @click="routeToPath('/factory/offline/'+factoryId,'mallplus', 'new')">
          线下网点
        </div>


        <div v-for="i in classify" :class="i.classifyId == classifyId?'nav_list nav_list_active':'nav_list'"
        @click="routeToPath('/product/list/'+i.factoryId+'?classifyId='+i.classifyId,'mallplus', 'new')">
            {{ i.classifyName }}
        </div>
          <div :class="index == 'xorder'?'nav_list nav_list_active':'nav_list'" @click="routeToPath('/factory/xorder/'+factoryId,'mallplus')">
            协议订单
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getFactoryClassifyBottom } from '@/api/factory'
export default {
  props: ['index', 'factoryId'],
  name: 'NavList',
  components: {

  },
  watch: {
    factoryId(val) {
      this.getFactoryClassifyBottom(val)
    }

  },
  data() {
    return {
      classify: null,
      classifyId: this.$route.query.classifyId,
    }
  },
  created() {
    this.getFactoryClassifyBottom(this.factoryId)
  },
  methods: {
    getFactoryClassifyBottom(val) {
      getFactoryClassifyBottom({factoryId: val?val:null}).then(res=>{
        this.classify = res.data
        console.log(this.index)


      })
    },

  }
}
</script>

<style lang="scss" scoped>
.nav-container{
  width: 100%;
  height: 46px;
  background: #255B8B;
  min-width: 1200px;
  .nav-center{
    height: 46px;
    line-height: 46px;
    color: #fff;
    font-size: 16px;
    .nav_ul_con{
      .nav_list{
        float: left;
        padding: 0 25px;
        cursor: pointer;
        color: #fff;
        text-decoration: none;
        .el-dropdown{
          color: #fff;
        }
      }
    }
  }
}

.el-dropdown-menu__item{
  padding: 0;
  cursor: pointer;
}
.el-dropdown-menu__item span{
  display: block;
  height: 100%;
  padding: 0 20px;
  line-height: 36px;
  cursor: pointer;
}
.nav_list_active{
  background-color: #184B79
}
</style>
